<template>

	<view class="container-news">
		<navbar :config="config" backColor="#000"></navbar>
		<view class="nav" v-if="isStick"></view>
		<!-- <view class="msg" @click="goToMsg">
			<text class="iconfont3 msgCenter">
				<image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/message.png" style="width: 50rpx;height: 50rpx; margin-left: 15rpx;"></image>
			</text>
			<text class="msgTxt" v-if="msgCenter==0?false:msgCenter">{{msgCenter}}</text>
		</view> -->
		<view id="header" v-if="swiperlist.length || bannerList.length">
			<view class="top" v-if="swiperlist.length > 0">
				<template>
					<swiper class="swiper" circular :autoplay="true" :interval="10000" :indicator-dots="true">
						<swiper-item v-for="(item, index) in swiperlist" :key="item.id">
							<view class="swiper-item"
								@click="$mUtil.imgLink(item.model_type, item.model_id, item.url, item.shop_id)">
								<image :src="item.cover" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</template>
			</view>
			<!-- <view class="banner" v-if="bannerList.length > 0">
				<image :src="bannerList[0].cover" mode="widthFix"
					@click="$mUtil.imgLink(bannerList[0].model_type, bannerList[0].model_id, bannerList[0].url, bannerList[0].shop_id)">
				</image>
			</view> -->
			<view class="messageView">
				<image :src="imgUrl+'/news/message.png'" class="messageImage"></image>
				<view class="messageView-title">新消费万亿蓝海市场招募事业合伙人</view>
			</view>
		</view>
		 <!-- :class="{'stickMain': isStick}" -->
		<view class="main">
			<!-- class="tabs_box" -->
			<view >
				<!-- :class="[isStick ? 'tabsStick' : 'tabs_box']" -->
				<view class="tabs" >
					<!-- :class="{'stickTabs': isStick}" -->
					<scroll-view scroll-x class="scorll-x" :scroll-left="scrollLeft" :show-scrollbar="false">
						<view class="tab" :class="{'active': current == index}" v-for="(item, index) in list"
							:key="item.id" :id="'item'+index" @click="tabsChange(index)">
							<view class="" style="margin-bottom: 7rpx;">{{item.name}}</view>
							<view class="redView" v-if="current == index"></view>
						</view>
					</scroll-view>
				</view>
			</view>
			<swiper class="list-swiper" :style="{height: tabHeight[current]+'px'}" :current="tabIndex"
				@change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
					<!-- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltoupper="topScroll" @scrolltolower="loadMore"
            :refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100"
            refresher-background="white" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
            @refresherrestore="onRestore" @refresherabort="onAbort"> -->
					<news :classify_id="item.id" :ref="'page' + index" :id="'page' + index"
						@getSwiperHeight="getSwiperHeight">
					</news>
					<!-- </scroll-view> -->
				</swiper-item>
			</swiper>
		</view>
		<!-- <entrepreneurship-zone-tabbar :current="1"></entrepreneurship-zone-tabbar> -->
	</view>
</template>

<script>
	import news from '@/pages/index/components/news';
	export default {
		components: {
			news
		},
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '惠选快讯',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				swiperlist: [],
				msgCenter: null,
				headerHeight: 0,
				isStick: false,
				list: [],
				scrollLeft: 0,
				totalCount: 0,
				current: 0,
				tabIndex: 0,
				pageList: [],
				triggered: false,
				tabHeight: [],
				systemInfo: {},
				tabScrollTop: [],
				scrollTop: 0,
				bannerList: []
			}
		},
		onLoad() {
			this.freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
			uni.getSystemInfo({
				success: res => {
					this.systemInfo = res
				}
			})
			this.getLocation()
			this.getSwiperList()
			this.getBanner()
			this.getClassify()
		},
		onShow() {
			this.getmessageNum()
		},
		onPageScroll(e) {
			if (e) {
				if (e.scrollTop >= this.headerHeight) {
					this.isStick = true
				} else {
					this.isStick = false
				}
				this.scrollTop = e.scrollTop
				this.getSwiperHeight()
			}
		},
		onReachBottom() {
			this.loadMore()
		},
		onPullDownRefresh() {
			this.tabScrollTop = []
			this.getmessageNum()
			this.getSwiperList()
			this.getBanner()
			this.getClassify(true)
			// this.getSwiperList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 300)
		},
		methods: {
			// 获取经纬度
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						uni.setStorageSync('locationObj', res)
					}
				});
			},
			// 获取轮播
			getSwiperList() {
				this.$http.get('/ad/ad/getShopAdByAdL/0/news-swiper').then(res => {
					if (res.code == 200) {
						this.swiperlist = res.list.slice(0, 6)
						this.$nextTick(() => {
							this.getDomHeight()
						})
					}
				})
			},
			// 获取banner
			getBanner() {
				this.$http.get('/ad/ad/getShopAdByAdL/0/news-banner').then(res => {
					if (res.code == 200) {
						this.bannerList = res.list
						this.$nextTick(() => {
							this.getDomHeight()
						})
					}
				})
			},
			async getSwiperHeight() {
				let minHeight = this.systemInfo.windowHeight - 44;
				let rect = await this.getGoodDom();
				if (rect && rect.height !== 0 && rect.height > minHeight) {
					this.tabHeight[this.current] = rect.height
					this.$forceUpdate()
				}
			},
			getGoodDom() {
				let self = this;
				return new Promise(resolve => {
					this.$nextTick(() => {
						let query = uni.createSelectorQuery();
						// #ifndef MP-ALIPAY
						query = query.in(this)
						// #endif
						query.select('#page' + this.current).boundingClientRect(data => {
							if (!data)
								return
							resolve(data)
						}).exec();
					})
				})
			},
			// 获取头部高度
			getDomHeight() {
				this.$u.getRect('#header').then(res => {
					this.headerHeight = res.height
				})
			},
			setScrollLeft(i) {
				let winWidth = uni.getSystemInfoSync().windowWidth - uni.upx2px(30)
				this.scrollLeft = this.tabarr[i].left + (this.tabarr[i].width / 2) - (winWidth / 2)
			},
			getWidth() { //得到元素的宽高
				let view = uni.createSelectorQuery().in(this);
				for (let i = 0; i < this.list.length; i++) {
					view.select('#item' + i).boundingClientRect();
				}
				view.exec(res => {
					this.tabarr = res
				})
			},
			/**获得消息数量 */
			getmessageNum() {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$http.get("/private/message/unread-num").then(res => {
						if (res && res.code == 200) {
							this.msgCenter = res.data
						}
					})
				} else {
					this.msgCenter = 0
				}
			},
			goToMsg() {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login"
					})
				} else {
					uni.navigateTo({
						url: "/pages/research/setup/myMsg"
					})
				}
			},
			// 获取资讯分类
			getClassify(refresh) {
				this.$http.get('/information/classify/list').then(res => {
					if (res && res.code == 200) {
						this.list = [...res.list,...[{
							id: '',
							name: '推荐'
						}]]
						setTimeout(() => {
							this.$nextTick(() => {
								this.getWidth()
								for (let i = 0; i < this.list.length; i++) {
									let item = this.$refs['page' + i]
									if (Array.isArray(item)) {
										this.pageList.push(item[0])
									} else {
										this.pageList.push(item)
									}
								}
								this.switchTab(this.tabIndex, refresh);
							})
						}, 300)
					}
				})
			},
			switchTab(index, refresh) {
				this.$nextTick(() => {
					this.getSwiperHeight()
				})
				if (refresh) {
					this.pageList.map(item => {
						item.dataList = []
					})
					// this.pageList[index].dataList = []
					this.$forceUpdate()
				}

				if (this.pageList[index].dataList.length === 0) {
					this.loadTabData(index, refresh ? 'refresh' : '');
				}

				if (this.tabIndex === index) {
					return;
				}
			},
			loadTabData(index, refresh) {
				this.pageList[index].loadData(index, refresh);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.tabIndex = index;
				this.current = index
			},
			swiperChange(e) {
				let tabTop = e.currentTarget.offsetTop; //tab距离顶部的距离
				let swiperTop = tabTop - uni.upx2px(100) - 44 - this.systemInfo.statusBarHeight;
				if (e.detail.source) {
					this.tabScrollTop[this.current] = this.scrollTop < swiperTop ? swiperTop : this.scrollTop; //给之前的tab赋值
				}
				this.tabIndex = e.detail.current;
				this.current = e.detail.current
				this.switchTab(this.current)
				this.setScrollLeft(this.current)
				if (this.scrollTop < swiperTop) return;
				if (this.tabScrollTop[this.current] < swiperTop) {
					this.tabScrollTop[this.current] = swiperTop //给当前的tab赋值
				}
				uni.pageScrollTo({
					scrollTop: this.tabScrollTop[this.current],
					duration: 0
				})
			},
			// topScroll() {
			//   // this.pageList[this.current].loadData(this.current, 'refresh');
			// },
			loadMore() {
				this.pageList[this.current].loadData(this.current, 'more');
			},
			// onPulling(e) {
			//   console.log("onpulling", e);
			// },
			// onRefresh() {
			//   if (this.freshing) return;
			//   this.freshing = true;
			//   this.pageList[this.current].loadData(this.current, 'refresh');
			//   setTimeout(() => {
			//     this.triggered = false;
			//     this.freshing = false;
			//   }, 500)
			// },
			// onRestore() {
			//   this.triggered = 'restore'; // 需要重置
			//   console.log("onRestore");
			// },
			// onAbort() {
			//   this.triggered = 'restore'; // 需要重置
			//   console.log("onAbort");
			// }
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F9F9F9;
	}
	.container-news {

		.msg {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			// top: 36rpx;
			top: 65rpx;
			right: 40rpx;
			z-index: 3;
			color: #fff;
			font-size: 24rpx;
			z-index: 7;

			.msgCenter {
				font-size: 40rpx;
			}

			.msgTxt {
				position: absolute;
				top: -24%;
				right: -16rpx;
				padding: 6rpx;
				// font-size: 20rpx;
				background: #FF1400;
				border-radius: 50%;
			}
		}


		.swiper {
			/deep/ .uni-swiper-dot {
				width: 15rpx !important;
				height: 15rpx;
				border-radius: 50% !important;
				background-color: #ffffff !important;
				opacity: 0.5;
			}

			/deep/ .uni-swiper-dot-active {
				width: 20rpx !important;
				height: 20rpx;
				border-radius: 50% !important;
				background-color: #ffffff !important;
				opacity: 1;
			}
		}

		.nav {
			position: fixed;
			top: 0;
			width: 100%;
			height: 80rpx;
			background-color: #FF721B;
			z-index: 9;
		}

		.top {
			// position: relative;
			// width: 100%;
			// height: 880rpx;
			width: 688rpx;
			height: 269rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-left: 31rpx;
			margin-right: 31rpx;
			margin-top: 19rpx;
			margin-bottom: 19rpx;
			border-radius: 19rpx 19rpx 19rpx 19rpx;

			.swiper,
			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 19rpx;

				image {
					width: 100%;
					height: 100% !important;
					vertical-align: middle;
					border-radius: 19rpx;
				}
			}
		}

		.banner {
			width: 100%;
			height: 160rpx;

			image {
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
		}

		.stickMain {
			margin-top: calc(100rpx + 100rpx);
		}

		.tabs_box {
			width: 100%;
			padding: 0 30rpx;
			margin-bottom: 19rpx;
			// border-bottom: 0.5px solid #e6e6e6;
		}

		.tabsStick {
			width: 100%;

			.stickTabs {
				// background: #FF721B;
				// margin-top: -4rpx
				
			}

			.tabs {
				.active {
					color: #ffffff !important;
				}
			}

			/deep/ .uni-scroll-view-content {
				justify-content: space-around;
			}
		}

		.tabs {
			// border-bottom: 0.5px solid #e6e6e6;
			font-size: 36rpx;
			font-weight: Regular;
			color: #474747;
			padding: 0 4rpx;
			width: 688rpx;
			height: 69rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-left: 31rpx;
			position: Sticky;
			top:0;
			

			.scorll-x {
				width: 100%;
				height: 100%;
				white-space: nowrap;
			}

			.tab {
				display: inline-block;
				height: 100%;
				line-height: 23rpx;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				padding-top:19rpx;
			}

			.active {
				font-weight: 600;
				font-size: 23rpx;
				color: #000000;
				line-height: 23rpx;
				height: 100%;
				display: flex;	
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				padding-top:19rpx;
				// &::after {
				//   position: absolute;
				//   bottom: 0;
				//   display: block;
				//   content: '';
				//   width: 100%;
				//   height: 4rpx;
				//   background: #3775f6;
				//   border-radius: 2rpx;
				//   z-index: 3;
				// }
			}
		}

		.stickTabs {
			position: fixed;
			// top: 80rpx;
			z-index: 9;
			
			font-size: 36rpx;
			font-weight: Regular;
			color: #474747;
			padding: 0 4rpx;
			width: 688rpx;
			height: 69rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			
		}

		.list-swiper {
			width: 100%;
			height: calc(100vh - 100rpx);

			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	::v-deep .uni-scroll-view-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main {
		background-color: #F6F6F6;
	}

	.messageView {
		width: 688rpx;
		height: 69rpx;
		margin: 0 auto;
		background: rgba(255, 33, 31, 0.05);
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-bottom: 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.messageImage {
		width: 46rpx;
		height: 46rpx;
		padding-left: 19rpx;
		margin-right: 15rpx;

	}

	.messageView-title {
		font-weight: 600;
		font-size: 25rpx;
		line-height: 29rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		background: linear-gradient(1.326555518504279deg, #FE8154 0%, #FF466D 48%, #FD170B 100%);
		-webkit-background-clip: text;
		/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;
		/*给文字设置成透明*/
	}
	.redView{
		width: 46rpx;
		height: 6rpx;
		background-color: #FF211F;
		margin-top: 7rpx;
	}

</style>